<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>黑马面面管理系统</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>

</head>
<body>
    <div id="frameContent" class="content-wrapper" style="margin-left:0px;">
        <!--标题区域-->
        <section class="content-header">
            <h1>题库管理
                <small>学科管理</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
            </ol>
        </section>

        <!-- 正文区域 -->
        <section class="content">

            <!-- .box-body -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">学科列表</h3>
                </div>

                <!-- 数据表格 -->
                <div class="box-body">
                    <div class="table-box">
                        <!--工具栏-->
                        <div class="pull-left">
                            <div class="form-group form-inline">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default" title="新建" @click='handleCreate()'><i class="fa fa-file-o"></i> 新建</button>
                                    <button type="button" class="btn btn-default" title="删除" @click='handleDelete()'><i class="fa fa-trash-o"></i> 删除</button>
                                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                </div>
                            </div>
                        </div>
                        <div class="box-tools pull-right">
                            <div class="has-feedback">
                                <input type="text" class="form-control input-sm" placeholder="搜索">
                                <span class="glyphicon glyphicon-search form-control-feedback"></span>
                            </div>
                        </div>
                        <!--工具栏/-->

                        <!--数据列表-->
                        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                            <tr>
                                <th class="" style="padding-right:0px;"></th>
                                <th class="sorting">序号</th>
                                <th class="sorting">学科名称</th>
                                <th class="sorting">学科简介</th>
                                <th class="sorting">学科状态</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr  v-for="(course,index) in dataList" class="odd" onmouseover="this.className='highlight'" onmouseout="this.className='odd'" >
                                <td><input type="checkbox" v-model="checkedItemIds" :value="course.id"/></td>
                                <td>{{index+1}}</td>
                                <td>{{course.name}}</td>
                                <td>{{course.remark}}</td>
                                <td v-if="course.state==1"><font color='green'>正常</font></td>
                                <td v-else><font color='red'>禁用</font></td>
                                <th class="text-center">
                                    <button type="button" class="btn bg-olive btn-xs" @click='handleUpdate(course.id)'>编辑</button>
                                </th>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="box-footer">
                    <!--
                分页组件
                  @size-change： 当改变每页条数时触发的函数
                  @current-change：当改变页码时触发的函数
                  current-page ：默认的页码
                  :page-sizes：每页条数选择框中显示的值
                  :page-size : 默认的每页条数
                  layout： 分页组件的布局
                      total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
                  :total: 总条数
            -->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-sizes="[3,5,8]"
                            :page-size="pagination.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pagination.total">
                    </el-pagination>
                </div>
            </div>

        </section>

        <!--添加弹出框-->
        <el-dialog title="添加学科信息" :visible.sync="dialogFormVisible4Add" @close="resetForm()">
            <!--
                :model="formData": 关联数据
                :rules: 关联校验规则
                ref： 在获取表单对象时使用
            -->
            <el-form :model="formData" ref="addForm" label-width="100px" class="demo-ruleForm">
                <div class="tab-pane active" id="tab-form">
                    <div class="row data-type">
                        <div class="col-md-2 title">学科名称</div>
                        <div class="col-md-10 data">
                            <input type="text" class="form-control" placeholder="学科名称" v-model="formData.name">
                        </div>
                        <div class="col-md-2 title">学科简介</div>
                        <div class="col-md-10 data line-height36">
                            <input type="text" class="form-control" placeholder="学科简介" v-model="formData.remark">
                        </div>
                        <div class="col-md-2 title">是否显示</div>
                        <div class="col-md-10 data line-height36">
                            <select class="form-control" v-model="formData.state">
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="box-tools text-center">
                    <button type="button" @click="handleAdd()" class="btn bg-maroon">保存</button>
                    <button type="button" class="btn bg-default" @click="resetForm();dialogFormVisible4Add=false">返回</button>
                </div>
            </el-form>
        </el-dialog>

        <!--编辑弹出框-->
        <el-dialog title="编辑学科信息" :visible.sync="dialogFormVisible4Edit" @close="resetForm()">
            <!--
                :model="formData": 关联数据
                :rules: 关联校验规则
                ref： 在获取表单对象时使用
            -->
            <el-form :model="formData" ref="editForm" label-width="100px" class="demo-ruleForm">
                <div class="tab-pane active">
                    <div class="row data-type">
                        <div class="col-md-2 title">学科名称</div>
                        <div class="col-md-10 data">
                            <input type="text" class="form-control" placeholder="学科名称" v-model="formData.name">
                        </div>
                        <div class="col-md-2 title">学科简介</div>
                        <div class="col-md-10 data line-height36">
                            <input type="text" class="form-control" placeholder="学科简介" v-model="formData.remark">
                        </div>
                        <div class="col-md-2 title">是否显示</div>
                        <div class="col-md-10 data line-height36">
                            <select class="form-control" v-model="formData.state">
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="box-tools text-center">
                    <button type="button" @click="handleEdit()" class="btn bg-maroon">保存</button>
                    <button type="button" class="btn bg-default" @click="resetForm();dialogFormVisible4Edit=false">返回</button>
                </div>
            </el-form>
        </el-dialog>
    </div>

    <script>
        new Vue({
            el:"#frameContent",
            data:{
                checkedItemIds:[], //选中的复选框id们
                dataList: [],//当前页要展示的分页列表数据
                pagination:{
                    currentPage:1, //当前页数
                    pageSize:5, //每页条数
                    total:100 //总条数
                },
                formData: {},//表单数据
                dialogFormVisible4Add: false,//增加表单是否可见
                dialogFormVisible4Edit:false//编辑表单是否可见
            },
            created(){ //vue对象创建完成的回调函数
                this.findByPage()
            },
            methods:{
                //分页查询方法
                findByPage() {
                    axios.get("../store/company/findByPage", {params: this.pagination}).then(resp => {
                        if (resp.data.flag) {
                            this.dataList = resp.data.data.list;
                            this.pagination.total = resp.data.data.total;
                        } else {
                            this.$message.error(resp.data.message);
                        }
                    })
                },
                //重置表单方法
                resetForm() {
                    this.formData = {};
                },
                //新建方法
                handleCreate() {
                    this.dialogFormVisible4Add = true;
                },
                //保存方法
                handleAdd() {
                    axios.post("../store/company/save",this.formData).then(resp=>{
                        if (resp.data.flag){
                            this.dialogFormVisible4Add=false;
                            this.findByPage();
                        }else {
                            this.$message.error(resp.data.message);
                        }
                    })
                },
                //修改方法
                handleUpdate(id) {
                    this.dialogFormVisible4Edit=true;
                    axios.post("../store/company/findById?id="+id).then(resp=>{
                        if (resp.data.flag){
                            this.formData=resp.data.data;
                        }else {
                            this.$message.error(resp.data.message);
                        }
                    })
                },
                //编辑方法
                handleEdit() {
                    axios.post("../store/company/edit",this.formData).then(resp=>{
                        if (resp.data.flag){
                            this.findByPage();
                            this.dialogFormVisible4Edit=false;
                        }else {
                            this.$message.error(resp.data.message);
                        }
                    })
                },
                //删除方法
                handleDelete() {
                    if (!this.checkedItemIds.length){
                        this.$message.error("至少选择一个条目😡");
                        return;
                    }
                    this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post("../store/company/delete",this.checkedItemIds).then(resp=>{
                            if (resp.data.flag){
                                this.findByPage()
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }else {
                                this.$message.error(resp.data.message);
                            }
                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                //改变每页条数时执行的函数
                handleSizeChange(pageSize) {
                    //修改分页查询的参数
                    this.pagination.pageSize = pageSize;
                    //重新执行查询
                    this.findByPage();
                },
                //改变页码时执行的函数
                handleCurrentChange(pageNum) {
                    //修改分页查询的参数
                    this.pagination.currentPage = pageNum;
                    //重新执行查询
                    this.findByPage();
                }
            }
        });
    </script>
</body>

</html>